import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:signature/signature.dart';

import 'logic.dart';

class WritePage extends StatelessWidget {
  const WritePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<WriteLogic>();
    final state = Get.find<WriteLogic>().state;

    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Obx(() {
              return Wrap(
                children: List.generate(state.list.length, (index) {
                  var bean = state.list[index];
                  if (state.list[state.currentIndex.value] == bean) {
                    return Text(
                      bean,
                      style: const TextStyle(
                          color: Colors.red,
                          fontWeight: FontWeight.bold,
                          fontSize: 20),
                    );
                  } else {
                    return Text(
                      bean,
                      style: const TextStyle(fontSize: 20),
                    );
                  }
                }),
              );
            }),
            Obx(() {
              return Text("请写 ${state.list[state.currentIndex.value]} 字");
            }),
            Obx(() {
              return Signature(
                width: Get.width,
                height: Get.height / 2,
                controller: state.signController.value,
                backgroundColor: Colors.grey.shade200,
              );
            }),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Expanded(
                    child: Obx(() {
                      return Slider(
                          max: 200,
                          min: 1,
                          value: state.penStrokeWidth.value,
                          onChanged: (v) {
                            state.penStrokeWidth.value = v;
                            state.signController.value = SignatureController(
                                penStrokeWidth: state.penStrokeWidth.value);
                          });
                    }),
                  ),
                  Obx(() {
                    return Text(
                        (double.tryParse('${state.penStrokeWidth.value}') ?? 0)
                            .toStringAsFixed(0));
                  })
                ],
              ),
            ),
            Expanded(
                child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    ElevatedButton(
                        onPressed: () {
                          state.signController.value.undo();
                        },
                        child: const Text("上一笔")),
                    ElevatedButton(
                        onPressed: () {
                          state.signController.value.redo();
                        },
                        child: const Text("下一笔")),
                    ElevatedButton(
                        onPressed: () {
                          state.signController.value.clear();
                        },
                        child: const Text("重写")),
                    ElevatedButton(
                        onPressed: logic.submit, child: const Text("提交")),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Expanded(
                          child: ElevatedButton(
                              onPressed: () {
                                if (state.currentIndex.value != 0) {
                                  state.currentIndex.value--;
                                  state.signController.value.clear();
                                }
                              },
                              child: const Text("上一个字"))),
                      const SizedBox(
                        width: 50,
                      ),
                      Expanded(
                          child: ElevatedButton(
                              onPressed: () {
                                if (state.currentIndex.value <
                                    state.list.length - 1) {
                                  state.currentIndex.value++;
                                  state.signController.value.clear();
                                }
                              },
                              child: const Text("下一个字"))),
                    ],
                  ),
                ),
              ],
            )),
          ],
        ),
      ),
    );
  }
}
